<template>
  <ul class="face_con">
    <!-- <li class="" v-for="(emojiFace, index) in emojiFaces.faces" :title="emojiFace.name" @click="editEmojiFace(emojiFace.name, index)">
      <span :title="emojiFace.name" class="emoji-face" :style="'background-position: ' + (-(25 * (parseInt(index%4)))) + 'px ' + (-(25 * (parseInt(index/4)))) + 'px;'"></span>
    </li> -->
    <li
      class
      v-for="(emojiFace, index) in emojiFaces2"
      :key="index"
      :title="emojiFace"
      @click="editEmojiFace(emojiFace, index)"
    >
      <img :src="'/img/emoji/'+emojiFace+'.png'" class="emoji_item" alt />
    </li>
  </ul>
</template>
<script type='text/javascript'>
export default {
  name: 'EmojiFace',
  data() {
    return {
      emojiFaces2: ['smile','smiley','joy','sweat_smile','laughing','blush','stuck_out_tongue_winking_eye','sunglasses','heart_eyes','kissing_heart','angry','expressionless','smirk','sleeping','worried','cold_sweat','flushed','sob','scream','anger','mask','grin','skull','muscle','yeah','ok_hand','thumbsup','thumbsdown','punch','clap','pray','broken_heart','heart','zzz','exclamation','question','star','wink'],
      emojiFaces: {
        faces: [
          { name: 'smile' },
          { name: 'smiley' },
          { name: 'laughing' },
          { name: 'blush' },
          { name: 'heart_eyes' },
          { name: 'smirk' },
          { name: 'flushed' },
          { name: 'kissing_heart' },
          { name: 'grin' },
          { name: 'wink' },
          { name: 'stuck_out_tongue_winking_eye' },
          { name: 'stuck_out_tongue_closed eyes' },
          { name: 'sleeping' },
          { name: 'worried' },
          { name: 'expressionless' },
          { name: 'sweat_smile' },
          { name: 'joy' },
          { name: 'cold_sweat' },
          { name: 'sob' },
          { name: 'angry' },
          { name: 'mask' },
          { name: 'scream' },
          { name: 'sunglasses' },
          { name: 'heart' },
          { name: 'broken_heart' },
          { name: 'star' },
          { name: 'anger' },
          { name: 'exclamation' },
          { name: 'question' },
          { name: 'zzz' },
          { name: 'thumbsup' },
          { name: 'thumbsdown' },
          { name: 'ok_hand' },
          { name: 'punch' },
          { name: 'yeah' },
          { name: 'clap' },
          { name: 'muscle' },
          { name: 'pray' },
          { name: 'skull' },
          { name: 'trollface' },
        ],
      },
    }
  },
  methods: {
    editEmojiFace(value, index) {
      let con = ':' + value + ':'
      let date = {
        index: index,
        value: con,
      }
      this.$emit('setEmojiFace', date)
    },
  },
}
</script>
<style lang="stylus" scoped>
.face_con
  padding 15px
.face_con li
  float left
</style>
